<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!--<div class="goto">-->
      <!--<router-link to="/ratify">-->
      <!--<img src="../../assets/home_img/left.png" alt="">-->
      <!--</router-link>-->
      <!--</div>-->
      <p>下单</p>
    </div>
    <div style="height: 2.4rem"></div>
    <!-- 内容 -->
    <div>
      <div class="line">
        <p class="lineName">水泥品种：</p>
        <select>
          <option value ="">请选择水泥品种</option>
          <option value ="volvo">Volvo</option>
          <option value ="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
      </div>
    </div>
    <div class="line">
      <p class="lineName">提货类型：</p>
      <select v-model="type" @change="pickuptype()" style="color: cornflowerblue">
        <option value ="">请选择提货类型</option>
        <option value ="1">自提</option>
        <option value ="2">配送</option>
      </select>
    </div>

    <!-- 提示模块 -->
    <div class="hint" v-show="hint">
      <p><span style="color: red">*</span>请在上方选择提货类型</p>
    </div>
    <!-- 自提模块 -->
    <div class="take" v-show="take">
      <!-- 选择车辆司机 -->
      <div class="driver">
        <p>车辆车牌：</p>
        <p>司机姓名：</p>
        <p>司机电话：</p>
      </div>
    </div>

    <!-- 配送模块 -->
    <div class="distribution" v-show="distribution">
      <!-- 选择时间 -->
      <div class="giveline">
        <p class="lineName" @click="timeClick()">送货时间：<span style="margin-left: 0.6rem; font-size: 0.88rem; color: cornflowerblue">{{selectedDate}}</span></p>

        <calendar v-model="calendarShow" :defaultDate="defaultDate" @change="handelChange"></calendar>
      </div>
      <!-- 送货数量 -->
      <div class="giveline">
        <p class="lineName">送货数量：</p>
        <input type="number" class="input" placeholder="请输入送货数量" oninput="if(value.length>5)value=value.slice(0,5)">
        <span>吨</span>
      </div>
      <!-- 送货地址 -->
      <div class="giveline">
        <p class="siteName">送货地址：</p>
        <div style="height: 0.4rem"></div>
        <div class="givelineCtn">
          <p class="givelineCtntext">{{sitetext}} <span v-if="this.sitetext =='' ">请在右边选择收货地址</span></p>
        </div>
        <img src="../../assets/site_img/compile.png" alt="" class="selectSite" @click="onSiteList()">
        <div class="siteList" v-show="siteLists">
          <div class="siteListAn"></div>
          <div class="siteListMing">
            <img src="../../assets/order_img/off.png" class="off" alt="" @click="offSiteList()">
            <div style="height: 1rem"></div>
            <div class="siteCard" v-for="(item, index) in siteData" :key="index">
              <div class="cardbox">
                <img src="../../assets/site_img/name.png" alt="" class="cardimg">
                <p>{{item.contact}}</p>
              </div>
              <div class="cardbox">
                <img src="../../assets/site_img/phone.png" alt="" class="cardimg">
                <p>{{item.mobile}}</p>
              </div>
              <div class="cardbox">
                <img src="../../assets/site_img/site1.png" alt="" class="cardimg1">
                <div class="sitetext">
                  <p>{{item.address}}</p>
                </div>
              </div>
              <div class="default" v-if="item.type">
                <p>默认地址</p>
              </div>
              <div style="height: 0.4rem"></div>
              <div class="cardfooter">
                <p @click="oksite(index)">选择该地址</p>
              </div>
            </div>
            <div style="height: 1rem"></div>
          </div>
        </div>
      </div>
      <div class="giveline" style="margin-top: 0.6rem">
        <p class="siteName">备注：</p>
        <div style="height: 0.4rem"></div>
        <textarea class="siteTextarea" placeholder=""></textarea>

      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from '../footer/footer'
  export default {
    data(){
      return{
        //  提货类型
        type:'',
        //  自提
        take: false,
        //  配送
        distribution: false,
      //   提示
        hint: true,
      //  地址列表
        siteLists:false,


      //  请求地址列表
        siteData:'',

        sitetext:'',
        //  时间
        defaultDate: new Date(),
        calendarShow: false,
        selectedDate: '请选择配送时间',

      }
    },
    components:{
      Footer
    },
    created(){
      this.siteList();
    },
    methods:{
      //  选择提货类型
      pickuptype(){
        console.log(this.type);
        if (this.type == 1) {
          this.take = true;
          this.distribution = false;
          this.hint = false;
        } else {
          this.distribution = true;
          this.take = false;
          this.hint = false;
        };
        if (this.type == ''){
          this.hint = true;
          this.take = false;
          this.distribution = false;
        };
      },
    //  点击弹出地址栏
      onSiteList(){
        this.siteLists = true;
      },
    //  点击关闭地址栏
      offSiteList(){
        this.siteLists = false;
      },
      //  请求地址接口
      siteList(){
        let postData = this.$qs.stringify({
          offset:'',
          limit:'',
          storeId: 1,
        });
        this.$axios({
          method:'POST',
          url:'api/address/addressList',
          data:postData
        }).then((res)=>{
          console.log(res.data.msg,'请求地址列表成功');
          this.siteData = res.data.data;
        }).catch((err)=>{
          console.log(err);
        })
      },
    //  选择当前的地址
      oksite(index){
        this.sitetext = this.siteData[index].address;
        this.siteLists = false;
      },

    //  时间事件
      timeClick(){
        this.calendarShow = true;
      },
      handelChange(date, formatDate){
        console.log(formatDate);
        this.selectedDate = formatDate;
      },
    },

  }

</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100%;
    height: 2.4rem;
    text-align: center;
    background: #609FE0;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .header p {
    line-height: 2.4rem;
    font-size: 1.05rem;
    color: white;
    font-weight: bolder;
  }

  /* 内容 */
  .line {
    width: 100%;
    background: white;
    border-bottom: 1px solid gainsboro;
  }
  .line .lineName {
    font-size: 0.95rem;
    color: #666666;
    line-height: 3.5rem;
    display: inline;
    margin-left: 0.6rem;
  }
  .line select {
    outline: 0;
    font-size: 0.88rem;
  }
  .hint {
    margin-top: 0.6rem;
    background: white;
    text-align: center;
  }
  .hint p {
    font-size: 0.93rem;
    line-height: 5rem;
    color: #666666;
  }
  /* 提货 */
  .take {
    margin-top: 0.6rem;
    width: 100%;
    background: white;
  }
  .driver {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .driver p {
    font-size: 0.95rem;
    color: #666666;
    margin-left: 0.6rem;
    margin-bottom: 0.3rem;
  }
  /* 配送 */
  .distribution {
    margin-top: 0.6rem;
  }
  .giveline {
    width: 100%;
    background: white;
    border-bottom: 1px solid gainsboro;
    position: relative;
  }
  .giveline .lineName {
    font-size: 0.95rem;
    color: #666666;
    line-height: 3.5rem;
    display: inline;
    margin-left: 0.6rem;
  }
  .giveline .selectSite {
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    top: 0.9rem;
    right: 0.6rem;
  }
  /* 配送地址 */
  .siteName {
    position: absolute;
    top: 0.8rem;
    left: 0.6rem;
    font-size: 0.95rem;
    color: #666666;
  }
  .givelineCtn {
    height: 2.6rem;
    width: 62%;
    margin-left: 24%;
    background: #f2f2f2;
    border-radius: 0.25rem;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0.3rem;
  }
  .givelineCtntext {
    font-size: 0.9rem;
    color: #666666;
  }
  .input {
    border: none;
    border-bottom: 1px solid gainsboro;
    outline: 0;
    width: 9rem;
    height: 1.6rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    color: #666666;
    padding-left: 0.3rem;
  }
  /* 地址列表 */
  .siteListAn {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: black;
    opacity: 0.3;
    z-index: 9;
  }
  .off {
    width: 1.6rem;
    height: 1.6rem;
    position: fixed;
    top: 7.5%;
    right: 6%;
    z-index: 10;
  }
  .siteListMing {
    position: fixed;
    width: 90%;
    height: 80%;
    top: 7%;
    left: 5%;
    z-index: 9;
    background: white;
    border-radius: 0.25rem;
    overflow: auto;
  }
  /* 地址卡片 */
  .siteCard {
    width: 94%;
    margin-left: 3%;
    background: white;
    border: 1px solid gainsboro;
    border-radius: 0.25rem;
    margin-top: 1rem;
    position: relative;
  }
  .cardbox {
    margin-left: 0.6rem;
    padding-top: 0.3rem;
    position: relative;
  }
  .cardimg {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: bottom;
  }
  .cardimg1 {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
  }
  .cardbox p {
    display: inline !important;
    line-height: 1.6rem;
    font-size: 0.9rem;
    color: #666666;
    margin-left: 0.4rem;
  }
  .sitetext {
    width: 80%;
    margin-left: 10%;
    background: #f2f2f2;
    padding: 0.1rem 0.7rem;
    border-radius: 0.25rem;
  }
  .cardfooter {
    width: 100%;
    /*height: 2.4rem;*/
    border-top: 1px solid gainsboro;
    text-align: center;
  }
  .cardfooter p {
    font-size: 0.88rem;
    line-height: 2rem;
    color: #609FE0;
  }
  .default {
    /*width: 10%;*/
    padding: 0.1rem 0.2rem;
    border-radius: 0.25rem;
    background: red;
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
  }
  .default p {
    color: white;
    font-size: 0.7rem;
  }
  .siteTextarea {
    outline: 0;
    border: 1px solid gainsboro;
    border-radius: 0.25rem;
    padding-left: 0.6rem;
    padding-top: 0.3rem;
    width: 62%;
    margin-left: 24%;
    height: 4rem;
    font-size: 0.85rem;
    color: #666666;
  }

</style>